<template>
	<view class="answer-box">
		<template v-if="isRight">
			<view>你的答案：<text class="answer-word" v-if="showText">{{ info.myAnswer | formatAnswer }}</text>
			</view>
		</template>
		<template v-else>
			<view>你的答案：<text class="answer-wrong-word" v-if="showText">{{ info.myAnswer | formatAnswer }}</text>
			</view>
		</template>
		<view>正确答案： <text class="answer-word">{{ info.rightAnswer | formatAnswer }}</text></view>
	</view>

</template>

<script>
	export default {
		filters: {
			formatAnswer(arr) {
				return arr.join(',')
			}
		},
		props: {
			info: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			isRight(){
				return this.info.isRight
			},
			showText(){
				return this.info.isRight != null
			}
		}
	}
</script>

<style scoped lang="scss">
	.answer-box {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		color: #4d4479;
	
		.answer-word {
			color: #2c8869;
			font-weight: 600;
		}
	
		.answer-wrong-word {
			color: red
		}
	}
</style>
